<template>
    <el-card>
        <el-table :data="tableData" border style="width: 100%" size="small">
            <el-table-column prop="awardName" label="奖项名称" width="180">
                <template #default="scope">
                    <div v-if="editingAwardId === scope.row.awardId">
                        <el-input v-model="scope.row.awardName" size="small"></el-input>
                    </div>
                    <div v-else>
                        {{ scope.row.awardName }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="description" label="描述">
                <template #default="scope">
                    <div v-if="editingAwardId === scope.row.awardId">
                        <el-input v-model="scope.row.description" size="small"></el-input>
                    </div>
                    <div v-else>
                        {{ scope.row.description }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="dateAwarded" label="颁奖日期" width="240">
                <template #default="scope">
                    <div v-if="editingAwardId === scope.row.awardId">
                        <el-date-picker v-model="scope.row.dateAwarded" type="date" size="small"></el-date-picker>
                    </div>
                    <div v-else>
                        {{ scope.row.dateAwarded }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="240">
                <template #default="scope">
                    <el-button type="primary" size="small">分配</el-button>
                    <el-button v-if="editingAwardId === scope.row.awardId" @click="saveAward(scope.row)" type="primary"
                        size="small">保存</el-button>
                    <el-button v-else @click="editAward(scope.row)" type="primary" size="small">编辑</el-button>
                    <el-button @click="deleteAward(scope.row)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import axios from '@/services/axios.js'
import { useAwardStore } from '@/stores/awardStore.js'

const awardStore = useAwardStore()
const editingAwardId = ref(null)

const tableData = computed(() => awardStore.awards)

function getAwardInfo () {
    axios.get('/awards/all').then(response => {
        if (response.data.code === 1) {
            awardStore.setAwards(response.data.data)
            console.log('奖项信息已更新:', awardStore.awards)
        } else {
            console.error('获取奖项信息失败:', response.data.msg)
        }
    }).catch(error => {
        console.error('请求错误:', error)
    })
}

function editAward (award) {
    editingAwardId.value = award.awardId
}

function saveAward (award) {
    // 保存奖项的逻辑
    console.log('保存奖项:', award)
    editingAwardId.value = null
}

function deleteAward (award) {
    // 删除奖项的逻辑
    console.log('删除奖项:', award)
}

// 在组件挂载时调用函数以获取奖项信息
onMounted(() => {
    getAwardInfo()
})
</script>

<style scoped>
ul {
    list-style-type: none;
    padding-left: 0;
}
</style>